overviewControls: Ensure ws thumbnails are expanded before fading in

The current logic in `_updateThumbnailsBox` updates the expand fraction
only after the fade animation completes, rendering the fade-in
transition broken: the thumbnails fade in, but they have a height of 0
until after the animation, when they jarringly "pop" into place. This
abrupt transition is observable when exiting search in the overview with
multiple active workspaces.

Instead, split up the logic a bit to make sure the thumbnails always
appear fully-expanded during the animation: when animating in, the
`expand-fraction` is set _before_ the animation starts, and when
animating out it is set after.

This logic should make all workspace thumbnail state transitions behave
correctly:

- The thumbnails still expand/collapse smoothly when `should-show`
  changes because `_updateThumbnailsBox` is called only when that
  transition completes.

- Transitions into/out of search just fade the thumbnails because they
  are always expanded during the animation.

- https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7668 is avoided
  because `expand-fraction` is still set to 1 by `_updateThumbnailsBox`
  when revealing the thumbnails.

- The thumbnails still have an `expand-fraction` of 0 when hidden,
  carrying over the fixes from 9bf550da8 ("overviewControls: Set
  expandFraction for ws thumbnails to 0 when hidden").

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7985
Fixes: c576f82bd ("overviewControls: Make sure thumbnails expandFraction is bound to visibility")
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3888>

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index e8e90da873548ae49ed1453c281391dc9a1311fe..abeca3c571da6a36badf1d2f920e1c1f0145683c 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -553,6 +553,7 @@ class ControlsManager extends St.Widget {
         if (thumbnailsBoxVisible) {
             this._thumbnailsBox.opacity = 0;
             this._thumbnailsBox.visible = thumbnailsBoxVisible;
+            this._thumbnailsBox.expandFraction = 1.0;
         }
 
         const params = {
@@ -560,10 +561,9 @@ class ControlsManager extends St.Widget {
             duration: animate ? SIDE_CONTROLS_ANIMATION_TIME : 0,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => {
-                this._thumbnailsBox.set({
-                    visible: thumbnailsBoxVisible,
-                    expandFraction: thumbnailsBoxVisible ? 1.0 : 0.0,
-                });
+                this._thumbnailsBox.visible = thumbnailsBoxVisible;
+                if (!thumbnailsBoxVisible)
+                    this._thumbnailsBox.expandFraction = 0.0;
             },
         };